<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.web {
				width: 300px;
				height: 300px;
				border: 2px solid #000;
				margin: 0 auto;
				margin-top: 100px;
			}
			
			ul {
				overflow: hidden;
			}
			
			li {
				float: left;
				width: 100px;
				box-sizing: border-box;
				border: 1px solid #000;
				cursor: pointer;
				text-align: center;
			}
			
			li:active {
				background: gainsboro;
			}
			
			.content {
				width: 300px;
				height: 300px;
				position: relative;
			}
			
			.content div {
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			
			.content div:nth-child(1) {
				display: block;
			}
		</style>
	</head>

	<body>
		<!--选项卡-->
		<div class="web">
			<ul>
				<li>html</li>
				<li>css</li>
				<li>javascript</li>
			</ul>
			<div class="content">
				<div>html是超文本标记语言</div>
				<div>css是。。。。</div>
				<div>javascript是。。。。</div>
			</div>
		</div>

		<script>
			var aLi = document.querySelectorAll("li");
			var aCont = document.querySelectorAll(".content div");
			for(var i = 0; i < aLi.length; i++) {
				(function(k) {
					aLi[k].addEventListener("click", function() {
						for(var j = 0; j < aCont.length; j++) {
							aCont[j].style.display = "none";
						}
						aCont[k].style.display = "block";
					})
				})(i);
			}
		</script>
	</body>

</html>